Este artigo vem do documento oficial:
http://cn.vuejs.org/guide/components.html#props
Este tutorial é um tutorial mais detalhado e mais abrangente compilado pelo editor em combinação com documentos oficiais, o que é especialmente adequado para os iniciantes lerem.
Entrega de dados de adereços
①Scope de instâncias de componentes:
É isolado e simplesmente colocado, os valores não são compartilhados entre os componentes, mesmo que haja um atributo com o mesmo nome.
<div id = "App"> <DDE> </DED> <Lel> </el> </div> <cript> var VM = new Vue ({el: '#app', componentes: {"Add": {Model: "<butt> Btn: {{{Btn}} </>", Data: FUTNE () {) {modelo: "<butter> btn: {{btn}} </button>", data: function () {return {btn: "456"}; </script>O resultado da renderização é:
2 botões, o primeiro tem um valor de 123 e o segundo tem um valor de 456 (embora ambos sejam BTN)
② Use adereços para vincular dados estáticos:
[1] Este método é usado para passar strings e o valor é gravado no elemento personalizado do componente pai.
【2】 O exemplo a seguir não pode passar o valor no atributo de dados do componente pai
【3】 substituirá o valor do mesmo nome no atributo de dados do modelo.
Código de exemplo:
<div id = "App"> <add btn = "h"> </add> </div> <cript> var VM = new Vue ({el: '#app', dados: {h: "hello"}, componentes: {"add": {props: ['btn'], modelo: "<butt> btn": {{props: ['btn'], moda: {btn: "123"}; </script>De acordo com este método de escrita, o valor do BTN é H, não 123, ou olá.
【4】 Método de escrita de camelo
Se a interpolação for camelo,
Na tag HTML, como as características do HTML são insensíveis a minúsculas (como Li e Li são as mesmas), os valores a serem passados na etiqueta HTML devem ser escritos como linha horizontal curta (como o teste BTN) para ser sensível à caixa.
Na matriz de adereços, ela deve ser consistente com a interpolação e escrita como camelo (como o melhor).
Por exemplo:
Props: ['btntest'], modelo: "<butto> btn: {{btntest}} </button>",Escrita correta:
<add btn-test = "h"> </dition>
Se a interpolação for gravada em um tipo de linha horizontal curta ou a tag HTML for gravada em um estilo de camelo, não entrará em vigor normalmente. (A menos que a interpolação não seja escrita como picante de camelo no limite do estojo)
③Bind Data dinâmica usando adereços:
Simplificando, é para fazer uma certa interpolação do componente filho consistente com os dados do componente pai.
A maneira padrão de escrevê-lo é (usando V-Bind):
<add-bind: o valor do filho componente = "Propriedade do componente pai"> </dict>
Como código
<div id = "App"> <add v-bind: btn = "h"> </add> </div> <cript> var vm = new vue ({el: '#app', dados: {h: "hello"}, componentes: {"add": {props: ['btn'], modelo: "<> bt bt: bt: bt: bt: bt: bt: bt: {but bt: {{props: ['Btn'], modelo:" () {return {'btn': "123"}; </script>ilustrar:
【1】 O valor de H nos dados do componente pai usado pelo BTN;
【2】 O valor de retorno na função dos dados do componente filho é substituído.
[3] Em outras palavras, o valor do componente pai (com base no nome do atributo) é usado e o valor do rótulo é usado como uma string.
【4】 ainda precisa usar adereços, caso contrário, usará o valor do BTN em seus dados
Sintaxe Literal e Dinâmica:
[1] Simplificando, se você não adicionar B-Bind, você passa uma quantidade literal, ou seja, é tratada como uma corda (por exemplo, 1 também é uma string, não um tipo de número);
【2】 Adicionar-se-bind, a expressão JS é passada (para que o valor do componente pai possa ser passado);
【3】 Depois de adicionar a B-Bind, se o valor do componente pai puder ser encontrado, o valor do componente pai será usado; Se não houver um correspondente, ele é considerado uma expressão JS (por exemplo, 1+2 é considerado 3, {a: 1} é considerado um objeto);
Como código:
<div id = "App"> <Add V-Bind: Btn = "1+2"> </dition> </div> <cript> var VM = new Vue ({el: '#app', dados: {h: "hello"}, componentes: {"add": {{{{{Btn '],}, " }}); </script>O valor de BTN aqui é 3 (em vez de 1+2 como string sem adicionar v-bind)
⑤Props Tipo de ligação:
[1] Simplificando, ele é dividido em dois tipos, a saber, a ligação unidirecional (o componente pai pode afetar o componente filho, mas o oposto não é possível) e a ligação bidirecional (o componente filho também pode afetar o componente pai);
【2】 Exemplo de ligação unidirecional: (padrão ou use .once)
<div id = "App"> Componente pai: <input v-model = "val"> <br/> componente filho: <teste v-bind: test-val = "val"> </stest> </div> <cript> var vplyT = new] ({el: '#app', data: {val: 1}, componentes: {"Test v-model = 'testVal'/> "}}}); </script>ilustrar:
Quando o valor do componente pai é alterado, o valor do componente filho também muda;
Quando o valor do componente filho é alterado, o valor do componente pai não será alterado. Se o valor do componente pai for modificado novamente, o componente filho será sincronizado novamente.
Deve-se notar também que, se um componente filho quiser ser ligado de maneira síncrona, a entrada do componente filho precisa ser modelo V, não um atributo de valor (que só pode ser uma ligação única, e a ligação será perdida após a modificação do valor do componente infantil)
【3】 Bi-Way Binding:
".sync" é necessário como um modificador
Como exemplo:
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test :test.sync="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { "test": { props: ['test'], template: "<input v-model = 'teste'/> "}}}); </script>O efeito é que, independentemente do valor que você altere, o outro mudará de acordo.
【4】 Verificação de adereços:
Simplificando, quando o componente obtém dados, ele é usado para verificação e só será usado se as condições se encontrarem.
O método de escrita é transformar adereços em um objeto, o valor que está sendo verificado é a chave do objeto, e a condição de verificação é o valor correspondente à chave.
Por exemplo:
Props: {test: {twoway: true}},Verifique se a variável de teste é de mão dupla e, se não for, um erro será relatado. (Observe que isso não pode ser usado para verificar a ligação única).
O código de amostra é o seguinte:
<div id = "app"> componente pai: <input v-model = "val"> <br/> componente filho: <test: test = "val"> </stest> </div> <cript> var VM = new Vue ({{el: '#app', dados: {val: 1}, twweents: {{{props: {{Test: {test: data: {val: 1}, twwentings: {{{props: {{{{Testes: {test: data: {val: 1}, componentes: {{':' {#App ', data: {val: 1}, twwents: {{{props: {{{{{{{{test: v-model = 'teste'/> "}}}); </script>Para mais tipos de verificação, consulte o tutorial oficial:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
O acima exposto é uma explicação detalhada do escopo do componente e exemplos de transferência de dados de adesivos do nono artigo de Vuejs apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!